// image_load/pages/lazy-image-origin/index.js
const lazyImg = (_that, data, name, loadingImage) => {
  for (let i = 0, len = data.length; i < len; i++) {
      wx.createIntersectionObserver().relativeToViewport({ //relativeToViewport指定页面显示区域作为参照区域之一
          bottom: 20
      }).observe('.item-' + i, (ret) => {
          ret.intersectionRatio > 0 ? data[i].show = true : '';
          _that.setData({
              [name]: data,
              loading: loadingImage
          })
      })
  }
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    lazyList: [
      {
        imgUrl: "https://img0.baidu.com/it/u=2566646385,2213824192&fm=253&fmt=auto&app=138&f=JPEG?w=893&h=500"
      },
      {
        imgUrl: "https://img2.baidu.com/it/u=791640261,44080610&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      },
      {
        imgUrl: "https://img0.baidu.com/it/u=1732772480,1050889914&fm=253&fmt=auto&app=138&f=JPEG?w=778&h=500"
      },
      {
        imgUrl: "https://img1.baidu.com/it/u=4001530358,139416054&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      },
      {
        imgUrl: "https://img1.baidu.com/it/u=3006525416,739516061&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      },
      {
        imgUrl: "https://img1.baidu.com/it/u=961451472,675417960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      },
      {
        imgUrl: "https://img0.baidu.com/it/u=4085930884,4214873769&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
      },
    ], //模拟数据
    list: [
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img0.baidu.com/it/u=2566646385,2213824192&fm=253&fmt=auto&app=138&f=JPEG?w=893&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img2.baidu.com/it/u=791640261,44080610&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img0.baidu.com/it/u=1732772480,1050889914&fm=253&fmt=auto&app=138&f=JPEG?w=778&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img1.baidu.com/it/u=4001530358,139416054&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img1.baidu.com/it/u=3006525416,739516061&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img1.baidu.com/it/u=961451472,675417960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img0.baidu.com/it/u=4085930884,4214873769&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img0.baidu.com/it/u=2566646385,2213824192&fm=253&fmt=auto&app=138&f=JPEG?w=893&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img2.baidu.com/it/u=791640261,44080610&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img0.baidu.com/it/u=1732772480,1050889914&fm=253&fmt=auto&app=138&f=JPEG?w=778&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img1.baidu.com/it/u=4001530358,139416054&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img1.baidu.com/it/u=3006525416,739516061&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img1.baidu.com/it/u=961451472,675417960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img0.baidu.com/it/u=4085930884,4214873769&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img0.baidu.com/it/u=2566646385,2213824192&fm=253&fmt=auto&app=138&f=JPEG?w=893&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img2.baidu.com/it/u=791640261,44080610&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img0.baidu.com/it/u=1732772480,1050889914&fm=253&fmt=auto&app=138&f=JPEG?w=778&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img1.baidu.com/it/u=4001530358,139416054&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img1.baidu.com/it/u=3006525416,739516061&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img1.baidu.com/it/u=961451472,675417960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      },
      {
        default: '/assets/images/loading-icon/loading.gif',
        show: false,
        imgUrl: "https://img0.baidu.com/it/u=4085930884,4214873769&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
      },
    ], //模拟数据
    height: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 传入参数
    // lazyImg(this, this.data.lazyList, 'lazyList', '../../../assets/images/loading-icon/loading.gif')

    // wx.getSystemInfo().then(res => {
    //   console.log(res);
    //   this.setData({
    //     height: res.windowHeight,
    //   })
    //   this.data.height && this.showImg()
    // })
    
  },

  showImg(){
    let group = this.data.list
    let height = this.data.height  // 页面的可视高度0
 
    // boundingClientRect添加节点的布局位置的查询请求。相对于显示区域，以像素为单位
    wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => {
    console.log(ret);
     ret.forEach((item, index) => {
        //  top节点的上边界坐标
        if (item.top > height){
          group[index].show = false // 根据下标改变状态
        }else {  // 判断是否在显示范围内
          group[index].show = true // 根据下标改变状态 
          if (index > 0 && item.top < -ret[index - 1].height){
          // if (item.top < -item.height){
            group[index].show = false // 根据下标改变状态
          }
        }
     })
     this.setData({
       list: group
     })
    }).exec()
 
  },

  
  // onPageScroll(){ // 滚动事件 
  //   this.showImg()
  // },

  onLazyLoad(info){
    console.log(info);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})